<template>
  <div>
    <div v-for="p in state" :key="p.id">
      <div class="all">
        <el-checkbox
          v-model="p.checkAll"
          :indeterminate="p.isIndeterminate"
          @change="handleCheckAllChange(p)"
          >{{ p.name }}</el-checkbox
        >
      </div>
      <el-checkbox-group
        v-model="p.checked"
        @change="handleCheckedCitiesChange(p)"
      >
        <el-checkbox v-for="c in p.children" :key="c.id" :label="c.id">
          {{ c.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="flex">
      <el-button @click="empty">清空</el-button>
      <el-button type="primary" @click="setAlloc">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  getResourceIdApi,
  resourceListAllApi,
  resourceCategoryAllApi,
  allocResourceApi,
} from "./api";
import { useRoute } from "vue-router";
import { el } from "element-plus/es/locale";
import { ElMessage, ElMessageBox } from "element-plus";
const route = useRoute();
type IState = IRoleCategory & {
  children: IRoleList[];
  checked: number[];
  checkAll: boolean;
  isIndeterminate: boolean;
};

const state = ref<IState[]>([]);

Promise.all([
  resourceCategoryAllApi(),
  resourceListAllApi(),
  getResourceIdApi(parseInt(route.query.id as string)),
])
  .then((res) => {
    state.value = res[0].data.map((item) => ({
      ...item,
      children: [],
      checked: [],
      checkAll: false,
      isIndeterminate: false,
    }));
    res[1].data.forEach((resource) => {
      const cate = state.value.find((cate) => cate.id === resource.categoryId);
      cate && cate.children.push(resource);
    });
    // console.log(state);
    res[2].data.forEach((item) => {
      const pp = state.value.find((p) => p.id === item.categoryId);
      pp && pp.checked.push(item.id);
    });
    state.value.map((pp) => {
      // 全选状态
      pp.checkAll = pp.checked.length === pp.children.length;
      //半选状态
      pp.isIndeterminate =
        pp.checked.length > 0 && pp.checked.length < pp.children.length;
    });
  })
  .catch(() => {});
const handleCheckAllChange = (data: IState) => {
  if (data.checkAll) {
    data.checked = data.children.map((item) => item.id);
  } else {
    data.checked = [];
  }
  //半选状态
  data.isIndeterminate =
    data.checked.length > 0 && data.checked.length < data.children.length;
};
const handleCheckedCitiesChange = (data: IState) => {
  // 全选状态
  data.checkAll = data.checked.length === data.children.length;
  //半选状态
  data.isIndeterminate =
    data.checked.length > 0 && data.checked.length < data.children.length;
};

const setAlloc = () => {
  ElMessageBox.confirm("此操作更改角色权限是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      allocResourceApi({
        roleId: parseInt(route.query.id as string),
        resourceIds: state.value.reduce<number[]>((prev, next) => {
          return prev.concat(next.checked);
        }, []),
      }).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
        }
      });
    })
    .catch(() => {});
};
const empty = () => {
  console.log(111);

  state.value.forEach((item) => {
    item.checked = [];
    // 全选状态 
    item.checkAll = item.checked.length === item.children.length;
    //半选状态
  item.isIndeterminate =
    item.checked.length > 0 && item.checked.length < item.children.length;
  });
};
</script>

<style lang="scss" scoped>
.all {
  padding: 20px;
  background-color: #b0cfff;
}
:deep(.el-checkbox-group) {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  padding: 20px;
}
.flex {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>
